<template>
    <!-- <div id="sketch"></div> -->
    <div id="typescriptTest"></div>
  </template>

<script setup lang="ts">
import { Color } from 'three';
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');

    // ******************** 基本类型 ********************
    //  const 和 let 的区别: 
    // const修饰的基本变量不能重新赋值, 但是如果const的是引用, 比如对象/数组, 那么其内部值可以修改, 但是const引用变量不能改变指向
    // let变量可变
    // 最佳实践 优先使用const 

    // 两种方式 定义数组 Array<数组类型> 或 数组类型[]：
    const testArrayNumber: Array<number> = [];
    const testArrayString: string[] = ["niu", "b", ];

    // 对象类型
    interface User {
        name: string,
        age: number,
        gender?: string
    };
    const testUser: User = {
        name: "Van Darkholm",
        age: 40,
        gender: "armed helicopter"
    };

    // ******************** 循环 ********************
    // 基本的for循环
    for ( let i = 0; i < 10; i++) {
        console.log( "value ${i}", i );
    }
    let testArray = ["a", "b", "c"];
    // for in 循环
    for ( let i in testArray ) {
        console.log( "value ${testArray[i]}", testArray[i] );
    }
    //map与 [for of 循环 ] [for each 循环]
    // 需要指定map的数据类型, 或者将键值对改为tuple常量; 比如; ["key1", "value1"], 改为 ["key1", "value1"] as const;
    // 使用管道 |  来声明联合类型
    let testMap = new Map<string, string|number>([
        ["key1", "value1"],
        ["key2", 111],
    ]);

    // for of 是ES6添加的 支持新的迭代协议 可以遍历: 数组/string/map/set 等可迭代的数据结构
    // 需要在 tsconfig.json中配置 compilerOptions , 添加 "targe": "es2015"; 和 "lib": ["DOM", "ES2015"]
    console.log( "******* map & for..of *******" );
    for ( let entry of testMap ) {
        console.log( entry[0], '\t', entry[1] );
    }
    testMap.set( "forEach", "aaa" ); // 这个方法居然是 set(value, key);
    console.log( "************* forEach ************* " )
    testMap.forEach( (key, value) => {
        console.log( "key:\t", key, "\tvalue:\t", value );
    } );

    // ******************** 面向对象 ********************
    class Circle {
        radius: number;
        color: Color;
        inner?: any;
        constructor(radius?: number){
            this.radius = radius;
        };

        getArea():number {
            return this.radius * this.radius * Math.PI;
        };
    }
    const testCircle = new Circle();
    console.log(testCircle.getArea());

    class Polygon {
        sides: number;
        private secret: any;
        constructor(sides?: number){
            this.sides = sides;
        };
    };
    class Rect extends Polygon {
        constructor(sides?: number) {
            super(sides);
            // this.secret = "secret";         // 属性“secret”为私有属性，只能在类“Polygon”中访问. 
        }
    }

});
</script>